<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div onclick="alert(1)">111</div>

    <script>


        // 事件
        //   DOM 0级事件    普通事件和行内事件    --- 会覆盖
        //   DOM 2级事件    事件监听    ---  不会覆盖


        // 事件监听语法：
        //   addEventListener(事件类型 , 事件处理函数)
        //   他不会覆盖之前的同类型事件

        var oDiv = document.querySelector('div');

        oDiv.addEventListener('click', function () {
            console.log(666);
        })



        // 当网站需要进行二次开发的时候，可能需要在原来的基础之后添加新的点击功能  
        oDiv.addEventListener('click', function () {
            console.log(777);
        })






    </script>

</body>

</html>